<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">每日销售金额</view>
		</view>
		<view class="qiun-charts">
			<canvas
				canvas-id="canvasMoney"
				id="canvasMoney"
				class="charts"
				@touchstart="touchMoney"
			></canvas>
		</view>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">销售前十商品</view>
		</view>
		<view class="qiun-charts">
			<canvas
				canvas-id="canvasColumn"
				id="canvasColumn"
				class="charts"
				@touchstart="touchColumn"
			></canvas>
		</view>
	</view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts.min.js';
let _self;
let canvaLineA = null;
let canvaColumn = null;
export default {
	data() {
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			moneyData: {
				categories: [
					'17/3',
					'18/3',
					'19/3',
					'20/3',
					'21/3',
					'22/3',
					'23/3',
					'24/3',
				],
				series: [
					{
						name: '销售金额',
						data: [2000, 2500, 2000, 3000, 2800, 2500, 2400, 2200],
					},
				],
			},
			chartData: {
				categories: [
					'猪肉',
					'蔬菜',
					'三文鱼',
					'牛肉',
					'鸭肉',
					'猪肉',
					'蔬菜',
					'三文鱼',
					'牛肉',
					'鸭肉',
				],
				series: [
					{
						name: '销售数量',
						data: [360, 150, 100, 80, 50, 360, 150, 100, 80, 50],
					},
				],
			},
		};
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		// eslint-disable-next-line new-cap
		canvaLineA = new uCharts({
			$this: _self,
			canvasId: 'canvasMoney',
			type: 'line',
			fontSize: 11,
			legend: {
				show: true,
			},
			dataLabel: false,
			dataPointShape: true,
			background: '#FFFFFF',
			pixelRatio: 1,
			categories: this.moneyData.categories,
			series: this.moneyData.series,
			animation: true,
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				gridType: 'dash',
				gridColor: '#CCCCCC',
				dashLength: 8,
				splitNumber: 4,
				min: 0,
				max: 4000,
				format: (val) => {
					return val.toFixed(0) + '元';
				},
			},
			width: this.cWidth,
			height: this.cHeight,
			extra: {
				line: {
					type: 'curve',
				},
			},
		});
		// eslint-disable-next-line new-cap
		canvaColumn = new uCharts({
			$this: this,
			canvasId: 'canvasColumn',
			type: 'column',
			legend: {
				show: true,
			},
			fontSize: 11,
			background: '#FFFFFF',
			pixelRatio: 1,
			animation: true,
			categories: this.chartData.categories,
			series: this.chartData.series,
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				gridType: 'dash',
				gridColor: '#CCCCCC',
				splitNumber: 5,
				min: 0,
				max: 500,
			},
			dataLabel: true,
			width: this.cWidth,
			height: this.cHeight,
			extra: {
				column: {
					type: 'group',
					width: 20,
				},
			},
		});
	},
	methods: {
		touchColumn(e) {
			canvaColumn.showToolTip(e, {
				format: function (item, category) {
					if (typeof item.data === 'object') {
						return category + ' ' + item.name + ':' + item.data.value;
					} else {
						return category + ' ' + item.name + ':' + item.data;
					}
				},
			});
		},
		touchMoney(e) {
			canvaLineA.showToolTip(e, {
				format: function (item, category) {
					if (typeof item.data === 'object') {
						return category + ' ' + item.name + ':' + item.data.value;
					} else {
						return category + ' ' + item.name + ':' + item.data;
					}
				},
			});
		},
	},
};
</script>

<style>
page {
	background: #f2f2f2;
	width: 750rpx;
	overflow-x: hidden;
}

.qiun-padding {
	padding: 2%;
	width: 96%;
}

.qiun-wrap {
	display: flex;
	flex-wrap: wrap;
}

.qiun-rows {
	display: flex;
	flex-direction: row !important;
}

.qiun-columns {
	display: flex;
	flex-direction: column !important;
}

.qiun-common-mt {
	margin-top: 10rpx;
}

.qiun-bg-white {
	background: #ffffff;
}

.qiun-title-bar {
	width: 96%;
	padding: 10rpx 2%;
	flex-wrap: nowrap;
}

.qiun-title-dot-light {
	padding-left: 10rpx;
	font-size: 28rpx;
	color: #000000;
}

.qiun-charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #ffffff;
}

.charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #ffffff;
}
</style>
